<template>
  <div>
    <button @click="seeDataJSON">查看数据JSON</button>
    <button @click="setModelValue">手动清空</button>
    <button @click="validate">提交表单</button>
    <button @click="resetForm">重置清空</button>
    <y-form
      ref="form"
      :formConfig="formConfig"
      :modelValue="modelValue"
      :readOnly="readOnly"
    />

    <el-dialog title="JSON查看" :visible.sync="jsonStatus" width="60%" center>
      <div class="json-viewer-style">
        <json-viewer :copyable="copyable" :value="modelValue" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'cp1',
  data() {
    return {
      // 表单配置项
      formConfig: {
        rows: 2,
        list: [
          {
            type: "render",
            prop: "render",
            span: 2,
            render: (h, { self, model, formModel }) => {
              return (
                <div>
                  <el-divider content-position="left">
                    <strong>type-input</strong>
                    <p>文本输入框</p>
                  </el-divider>
                </div>
              );
            },
          },
          {
            label: "多层级文本",
            type: "input",
            prop: "text1.a.b",
            placeholder: "输入\"显示\"查看",
            defaultValue: "显示"
          },
          {
            label: "普通文本",
            type: "input",
            prop: "text2",
            visible:(model) => {
              if(model?.text1?.a?.b === "显示"){
                this.formConfig.list
                return true;
              }
            },
          },
          {
            type: "render",
            prop: "render",
            span: 2,
            render: (h, { self, model, formModel }) => {
              return (
                <div>
                  <el-divider content-position="left">
                    <strong>type-number</strong>
                    <p>数字输入框默认居中展示</p>
                  </el-divider>
                </div>
              );
            },
          },
          {
            label: "多层级数字",
            type: "number",
            prop: "number1.a.b",
          },
          {
            label: "普通数字",
            type: "number",
            prop: "number2",
          },
          {
            type: "render",
            prop: "render",
            span: 2,
            render: (h, { self, model, formModel }) => {
              return (
                <div>
                  <el-divider content-position="left">
                    <strong>type-checkbox</strong>
                    <p>多选框默认样式button 单选框默认样式button</p>
                  </el-divider>
                </div>
              );
            },
          },
          {
            label: "多层级多选",
            type: "checkbox",
            defaultValue: [],
            prop: "checkbox1.a.b",
            optionsList: [
              {
                label: "文本",
                id: "1",
              },
              {
                label: "文本",
                id: "2",
              },
            ],
          },
          {
            label: "普通多选",
            type: "checkbox",
            defaultValue: [],
            prop: "checkbox2",
            optionsList: [
              {
                label: "文本",
                id: "1",
              },
              {
                label: "文本",
                id: "2",
              },
            ],
          },
          {
            label: "多层级单选",
            type: "radio",
            prop: "radio1.a.b",
            optionsList: [
              {
                label: "文本",
                id: 1,
              },
              {
                label: "文本",
                id: 2,
              },
            ],
          },
          {
            label: "普通单选",
            type: "radio",
            prop: "radio2",
            optionsList: [
              {
                label: "文本",
                id: 1,
              },
              {
                label: "文本",
                id: 2,
              },
            ],
          },
          {
            type: "render",
            prop: "render",
            span: 2,
            render: (h, { self, model, formModel }) => {
              return (
                <div>
                  <el-divider content-position="left">
                    <strong>type-date</strong>
                    <p>时间日期选择器有多个类型</p>
                  </el-divider>
                </div>
              );
            },
          },
          {
            span: 1,
            label: "多层级日",
            type: "date",
            prop: "day1.a.b",
            rules: {
              required: true,
              message: "请输入邮箱地址",
              trigger: "blur",
            },
          },
          {
            span: 1,
            label: "普通日",
            type: "date",
            prop: "day2",
            rules: {
              required: true,
              message: "请输入邮箱地址",
              trigger: "blur",
            },
          },
          {
            span: 1,
            label: "多层级周",
            type: "week",
            prop: "week1.a.b",
          },
          {
            span: 1,
            label: "普通周",
            type: "week",
            prop: "week2",
          },
          {
            span: 1,
            label: "多层级月",
            type: "month",
            prop: "month1.a.b",
          },
          {
            span: 1,
            label: "普通月",
            type: "month",
            prop: "month2",
          },
          {
            span: 1,
            label: "多层级年",
            type: "year",
            prop: "year1.a.b",
          },
          {
            span: 1,
            label: "普通年",
            type: "year",
            prop: "year2",
          },
          {
            span: 1,
            label: "多层级开结",
            type: "daterange",
            prop: "daterange1.a.b",
          },
          {
            span: 1,
            label: "普通开结",
            type: "daterange",
            prop: "daterange2",
          },
          {
            span: 1,
            label: "多层级到秒",
            type: "datetime",
            prop: "datetime1.a.b",
          },
          {
            span: 1,
            label: "普通到秒",
            type: "datetime",
            prop: "datetime2",
          },
          {
            span: 1,
            label: "多层级到秒双",
            type: "datetimerange",
            prop: "datetimerange1.a.b",
          },
          {
            span: 1,
            label: "普通到秒双",
            type: "datetimerange",
            prop: "datetimerange2",
          },
          {
            label: "多层级时间",
            type: "timeSelect",
            prop: "timeSelect1.a.b",
          },
          {
            label: "普通时间",
            type: "timeSelect",
            prop: "timeSelect2",
          },
          {
            type: "render",
            prop: "render",
            span: 2,
            render: (h, { self, model, formModel }) => {
              return (
                <div>
                  <el-divider content-position="left">
                    <strong>type-textarea</strong>
                    <p>文本域</p>
                  </el-divider>
                </div>
              );
            },
          },
          {
            label: "多层级文本域",
            type: "textarea",
            prop: "textarea1.a.b",
            autosize: {
              minRows: 3,
              maxRows: 3,
            },
          },
          {
            label: "普通文本域",
            type: "textarea",
            prop: "textarea2",
            autosize: {
              minRows: 3,
              maxRows: 3,
            },
          },
          {
            type: "render",
            prop: "render",
            span: 2,
            render: (h, { self, model, formModel }) => {
              return (
                <div>
                  <el-divider content-position="left">
                    <strong>type-colorPicker</strong>
                    <p>颜色选择器</p>
                  </el-divider>
                </div>
              );
            },
          },
          {
            label: "多层级颜色",
            type: "colorPicker",
            prop: "colorPicker1.a.b",
          },
          {
            label: "普通颜色",
            type: "colorPicker",
            prop: "colorPicker2",
          },
          {
            type: "render",
            prop: "render",
            span: 2,
            render: (h, { self, model, formModel }) => {
              return (
                <div>
                  <el-divider content-position="left">
                    <strong>type-rate</strong>
                    <p>评分选择器</p>
                  </el-divider>
                </div>
              );
            },
          },
          {
            label: "多层级评分",
            type: "rate",
            prop: "rate1.a.b",
          },
          {
            label: "普通评分",
            type: "rate",
            prop: "rate2",
          },
          {
            type: "render",
            prop: "render",
            span: 2,
            render: (h, { self, model, formModel }) => {
              return (
                <div>
                  <el-divider content-position="left">
                    <strong>type-switch</strong>
                    <p>switch</p>
                  </el-divider>
                </div>
              );
            },
          },
          {
            label: "多层级switch",
            type: "switch",
            prop: "switch1.a.b",
          },
          {
            label: "普通switch",
            type: "switch",
            prop: "switch2",
          },
          {
            type: "render",
            prop: "render",
            span: 2,
            render: (h, { self, model, formModel }) => {
              return (
                <div>
                  <el-divider content-position="left">
                    <strong>type-slider</strong>
                    <p>slider</p>
                  </el-divider>
                </div>
              );
            },
          },
          {
            label: "多层级滑动",
            type: "slider",
            prop: "slider1.a.b",
            marks: { 0: "0", 50: "50", 100: "100" },
          },
          {
            label: "普通滑动",
            type: "slider",
            prop: "slider2",
            marks: { 0: "0", 50: "50", 100: "100" },
          },
          {
            type: "render",
            prop: "render",
            span: 2,
            render: (h, { self, model, formModel }) => {
              return (
                <div>
                  <el-divider content-position="left">
                    <strong>type-select</strong>
                    <p>下拉选择框</p>
                  </el-divider>
                </div>
              );
            },
          },
          {
            label: "多层次下拉",
            type: "select",
            prop: "select1",
            optionsList: [
              {
                label: "文本",
                id: 1,
              },
              {
                label: "文本",
                id: 2,
              },
            ],
          },
          {
            label: "普通下拉",
            type: "select",
            prop: "select2",
            optionsList: [
              {
                label: "文本",
                id: 1,
              },
              {
                label: "文本",
                id: 2,
              },
            ],
          },
        ],
      },
      // 值
      modelValue: {},
      // 是否只读
      readOnly: false,
      // JSON数据
      copyable: {
        copyText: "复制Echart数据",
        copiedText: "已复制",
        timeout: 1500,
      },
      jsonStatus: false,
    };
  },
  methods: {
    seeDataJSON() {
      this.jsonStatus = true;
    },
    setModelValue() {
      // this.$delete(this.modelValue, 'text1')
      this.modelValue = {};
    },
    async validate() {
      let res = await this.$refs["form"].validate();
      console.log(res);
    },
    resetForm() {
      this.$refs["form"].resetForm();
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.json-viewer-style {
  height: 50vh;
  overflow: hidden;
  overflow-y: auto;
}
</style>